<template>
  <div>
    <el-table border
              :data="bookslist"
              style="width: 100%">
      <el-table-column type="index" label="'序号">

      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bookname"
        label="书名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
      </el-table-column>
      <el-table-column label='操作'>
        <template slot-scope="scope">
          <el-button @click.native.prevent="mydel(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <table border="1" cellspacing="0">
      <tr>
        <th>ID</th>
        <th>书名</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
      <tr v-for="i in bookslist">
        <td>{{i.id}}</td>
        <td>{{i.bookname}}</td>
        <td>{{i.price}}</td>
        <td>
          <button @click="mydel(i.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "Show",
    data: function () {
      return {
        bookslist: []
      }
    },
    mounted() {
      this.axios({
        url: 'http://localhost:8000/myapp/show/',
        method: 'get'
      }).then(res => {
        console.log(res.data);
        this.bookslist = res.data
      })
    },
    methods: {
      mydel(id) {
        this.axios({
          url: `http://localhost:8000/myapp/del/${id}`,
          method: 'delete'
        }).then(res => {
          window.location.reload()
        })
      }
    }
  }
</script>

<style scoped>

</style>
